<template>
	<view class="register-container">
		<!-- 页面标题 -->
		<view class="register-title">
			<view>新用户注册</view>
		</view>

		<!-- 用户名输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="user" size="22px"></wd-icon>
			</view>

			<wd-input v-model="form.username" placeholder="请设置用户名" :maxlength="20" input-align="left"
				class="input flex-1" label="用户名" label-width="140rpx"></wd-input>
		</view>

		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="user-add" size="22px"></wd-icon>
			</view>

			<wd-picker v-model="form.role" placeholder="请选择角色" input-align="left" class="input" confirm="onPhoneInput"
				:columns="roleColumns" label="角色" label-width="140rpx" />
		</view>

		<!-- 手机号输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="mobile" size="22px" class="input-icon"></wd-icon>
			</view>

			<wd-input v-model="form.phone" placeholder="请输入手机号" type="number" :maxlength="11" input-align="left"
				class="input" @input="onPhoneInput" label="手机号" label-width="140rpx"></wd-input>
		</view>

		<!-- 验证码输入 + 获取按钮 -->
		<view class="input-item code-item">

			<view class="input-icon">
				<wd-icon name="secured" size="22px"></wd-icon>
			</view>

			<wd-input v-model="form.code" placeholder="请输入验证码" type="number" :maxlength="6" input-align="left"
				class="input flex-1" label="验证码" label-width="140rpx"></wd-input>
			<wd-button size="small" type="primary" plain :disabled="!canSendCode" class="btn-code" @click="sendCode">
				{{ codeBtnText }}
			</wd-button>
		</view>

		<!-- 密码输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="lock-off" size="22px" class="input-icon"></wd-icon>
			</view>
			<wd-input v-model="form.password" placeholder="请设置密码（6-18位）" :maxlength="18" input-align="left"
				class="input flex-1" label="密码" label-width="140rpx" clearable show-password></wd-input>
		</view>

		<!-- 确认密码输入 -->
		<view class="input-item">
			<view class="input-icon">
				<wd-icon name="lock-off" size="22px" class="input-icon"></wd-icon>
			</view>
			<wd-input v-model="form.confirmPassword" placeholder="请确认密码" input-align="left" class="input flex-1"
				clearable show-password @input="checkPasswordMatch" label="确认密码" label-width="140rpx"></wd-input>
		</view>

		<!-- 密码匹配提示 -->
		<view v-if="form.confirmPassword" class="password-match">
			<text v-if="passwordMatch" class="match-success">
				<wd-icon name="success" size="24" color="#52c41a"></wd-icon> 密码一致
			</text>
			<text v-else class="match-error">
				<wd-icon name="error" size="24" color="#ff4d4f"></wd-icon> 两次密码不一致
			</text>
		</view>

		<!-- 注册按钮 -->
		<view class="btn-register">
			<wd-button type="primary" block :loading="loading" :disabled="!canRegister" @click="register">
				注册
			</wd-button>
		</view>


		<!-- 已有账号 -->
		<view class="login-link">
			已有账号？
			<text class="link" @click="navigateToLogin">立即登录</text>
		</view>
	</view>
		<WechatLogin/>
</template>

<script setup>
import WechatLogin from "@/components/wechat_login/index"

	import {
		reactive,
		ref,
		computed,
		onBeforeUnmount,
		watch
	} from 'vue'

	import {
		register as registerApi,
		sendCode as sendCodeApi,
		loginByPhoneCode as loginByPhoneCodeApi
	} from "@/api/user"

	import {
		useRouter
	} from 'uni-mini-router'

	// 路由实例 - 保留原逻辑
	const router = useRouter();

	// 使用reactive管理表单数据
	const form = reactive({
		username: '',
		role: '',
		phone: '',
		code: '',
		password: '',
		confirmPassword: ''
	})

	const roleColumns = ref(['志愿者', '商务'])

	// 其他响应式变量
	const loading = ref(false)
	const showPassword = ref(false)
	const showConfirmPassword = ref(false)
	const passwordMatch = ref(true)

	// 验证码相关变量
	const codeBtnText = ref('获取验证码')
	const timer = ref(null)
	const countdown = ref(60)
	const isCounting = ref(false)

	// 计算属性 - 移除了同意条款的判断条件
	const canSendCode = computed(() => {
		return /^1[3-9]\d{9}$/.test(form.phone) && !isCounting.value
	})

	const canRegister = computed(() => {
		return form.username.trim() &&
			/^1[3-9]\d{9}$/.test(form.phone) &&
			form.code.length === 6 &&
			form.password.length >= 6 &&
			form.password.length <= 18 &&
			form.password === form.confirmPassword &&
			!loading.value
	})

	// 方法定义
	const onPhoneInput = () => {
		// 手机号输入处理
	}

	// 发送验证码
	const sendCode = () => {
		if (!canSendCode.value) {
			uni.showToast({
				title: '手机号格式错误',
				icon: 'none'
			})
			return
		}

		// 发送验证码请求
		uni.showLoading({
			title: '发送中...'
		})

		// 实际项目中替换为真实接口调用
		setTimeout(() => {
			uni.hideLoading()
			 sendCodeApi({
				phone: form.phoen,
				scene: "register"
			}).then((res)=>{
					console.log("res:",res)
			})
		

			uni.showToast({
				title: '验证码已发送',
				icon: 'success'
			})
			startCountdown()
		}, 1500)
	}

	// 开始倒计时
	const startCountdown = () => {
		isCounting.value = true
		codeBtnText.value = `${countdown.value}秒后重发`

		timer.value = setInterval(() => {
			countdown.value--
			codeBtnText.value = `${countdown.value}秒后重发`

			if (countdown.value <= 0) {
				clearInterval(timer.value)
				isCounting.value = false
				codeBtnText.value = '获取验证码'
				countdown.value = 60
			}
		}, 1000)
	}

	// 检查密码匹配
	const checkPasswordMatch = () => {
		passwordMatch.value = form.password === form.confirmPassword
	}

	// 注册提交 - 移除了同意条款的验证
	const register = () => {
		if (loading.value) return

		// 验证表单
		if (!form.username.trim()) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none'
			})
			return
		}

		if (!form.role.trim()) {
			uni.showToast({
				title: '请选择角色',
				icon: 'none'
			})
			return
		}

		if (form.username.length < 2 || form.username.length > 20) {
			uni.showToast({
				title: '用户名长度应为2-20位',
				icon: 'none'
			})
			return
		}

		if (form.password.length < 6 || form.password.length > 18) {
			uni.showToast({
				title: '密码长度应为6-18位',
				icon: 'none'
			})
			return
		}

		loading.value = true

		// 实际项目中请替换为真实注册接口调用

		// 请求参数调整为从 model 取值
		const param = {
			"username": form.username,
			"role": form.role,
			"phone": form.phone,
			"password": form.password
		};
		registerApi(param).then((res) => {
			if (res.code == 200) {
				console.log(200, res)
				router.replaceAll({
					name: "account_login"
				})
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
			}
		})

		// setTimeout(() => {
		// 	loading.value = false
		// 	uni.showToast({
		// 		title: '注册成功',
		// 		icon: 'success',
		// 		success: () => {
		// 			// 注册成功后跳转到登录页
		// 			setTimeout(() => {
		// 				navigateToLogin()
		// 			}, 1500)
		// 		}
		// 	})
		// }, 1500)
	}

	// 跳转到登录页
	const navigateToLogin = () => {
		router.replaceAll({
			name: "account_login"
		})
	}

	// 监听确认密码变化
	watch(() => form.confirmPassword, () => {
		if (form.confirmPassword) {
			checkPasswordMatch()
		}
	})

	// 监听密码变化
	watch(() => form.password, () => {
		if (form.confirmPassword) {
			checkPasswordMatch()
		}
	})

	// 生命周期钩子
	onBeforeUnmount(() => {
		if (timer.value) {
			clearInterval(timer.value)
		}
	})
</script>

<style lang="less">
	@import '@/static/styles/colors.less';
	@import '@/static/styles/constants.less';

	.register-container {
		padding: 80rpx 40rpx 0;
		background-color: #fff;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.register-title {
		font-size: 48rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 80rpx;
		text-align: center;
	}

	.input-item {
		border-bottom: 1px solid #e5e5e5;
		padding: 15rpx 0;
		margin-bottom: 10rpx;
		display: flex;

		.input-icon {
			flex: 0 0 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.code-item {
		display: flex;
		align-items: center;
		gap: 0rpx;
	}


	:deep(.wd-input.is-cell) {
		padding-left: 0rpx !important;
	}

	:deep(.wd-cell) {
		padding-left: 0rpx !important;
	}

	.wd-input {
		&::v-deep .wd-input__control {
			font-size: 30rpx;
			color: #333;
			height: 80rpx;
			line-height: 80rpx;
		}

		&::v-deep .wd-input__prefix-icon {
			font-size: 34rpx;
			color: #999;
			margin-left: 10rpx;
		}

		&::v-deep .wd-input__label {
			font-size: 30rpx;
			color: #333;
			text-align: left;
		}
	}

	.btn-code {
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		flex-shrink: 0;
	}

	.password-match {
		margin: 5rpx 0 30rpx 150rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		gap: 5rpx;
	}

	.match-success {
		color: #52c41a;
	}

	.match-error {
		color: #ff4d4f;
	}

	.btn-register {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
		margin: 40rpx 0;
	}

	.login-link {
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.link {
		color: #007aff;
	}
</style>